<template>
    <div class="order-wrap">
        <ul class="order-tab flex">
            <li :class="{active: v.id === search.orderType}" v-for="v in tab.list" :key="v.id"
                @click="handlerOrderTab(v.id)">
                <span>{{v.name}}</span>
            </li>
        </ul>
        <div class="search-wrap flex">
            <i class="iconfont icon-search"></i>
            <input type="text" v-model="search.name" placeholder="搜索全部订单">
            <l-button type="search" @click="handlerSearch">搜索</l-button>
        </div>

        <div class="o-list">
            <div class="o-item" v-for="v in list">
                <div class="top flex al-c jc-sb">
                    <span>订单编号：{{v.appointID}}</span>
                </div>
                <router-link :to="'/admin/order/' + v.appointID + '?oid=' + v.iD" class="info flex">
                    <!--<l-image class="img" src="http://iph.href.lu/750x400?bg=dddddd" width="180" height="180"></l-image>-->
                    <div class="flex jc-sb" style="flex: 1">
                        <div class="l">
                            <div class="name">{{v.courseName | lineClamp(20)}}</div>
                            <div class="time">出行日期：{{v.courseTime}}</div>
                            <div class="time">预订日期：{{v.appointTime}}</div>
                        </div>
                        <div class="r">
                            <div class="price">￥{{v.payPrice}}</div>
                            <div class="status">{{v.appointStatus | orderStatus}}</div>
                        </div>
                    </div>
                </router-link>
               <!-- <l-button v-if="v.appointStatus === '8'"
                           @click.native.stop="$router.push('/admin/order/' + v.appointID + '?oid=' + v.iD)"
                           class="operate-btn">
                    立即支付
                </l-button>-->
            </div>
            <div class="list-loading">{{page.lastPage ? '没有了' : '加载中'}}</div>
        </div>
    </div>
</template>

<script>
    import list from '@m/mixins/list'

    export default {
        name: 'OrderList',
        mixins: [list],
        data() {
            return {
                tab: {
                    list: [
                        {
                            name: '全部订单',
                            id: '',
                        },
                        {
                            name: '未支付',
                            id: '0',
                        },
                        {
                            name: '支付成功',
                            id: '1',
                        }
                    ]
                },
                search: {
                    orderType: '',
                    courseName: ''
                },
                api: this.$api.order.list
            }
        },
        computed: {},
        async created() {
        },
        async mounted() {
            this.handlerOrderTab(this.$route.query.type || '')
        },
        components: {},
        methods: {
            handlerOrderTab(id) {
                this.search.orderType = id
                this.handlerSearch()
            },
            async handlerRefund(v) {
                if (confirm('您确认要退款吗？')) {
                    try {
                        await this.$api.order.refund(v)
                        this.$toast.success('退款申请已提交')
                        this.handlerSearch()
                    } catch (e) {
                    }
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../../../../style/var";

    .order-wrap {
        padding-top: 80px;

        .order-tab {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;

            li {
                position: relative;
                flex: 1;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #fff;
                cursor: pointer;

                &.active {
                    color: $main-color;

                    &:after {
                        position: absolute;
                        content: '';
                        left: 50%;
                        bottom: 0;
                        transform: translateX(-50%);
                        width: 4em;
                        border-bottom: 2px solid $main-color;
                    }
                }
            }
        }

        .o-list {
            padding: 0 20px;

            .o-item {
                position: relative;
                background-color: #fff;
                padding: 0 20px;
                overflow: hidden;
                border-radius: 15px;
                display: block;
                color: #333;
                margin-bottom: 20px;

                .name {
                    min-height: 70px;
                }

                .top {
                    border-bottom: 1px solid #eee;
                    height: 80px;
                    font-size: 24px;
                }

                .info {
                    padding: 20px 0;
                    color: #333;

                    .img {
                        flex: 0 0 180px;
                        border-radius: 10px;
                        overflow: hidden;
                        margin-right: 20px;
                    }

                    .l {
                        flex: 1;
                    }

                    .r {
                        flex: 0 0 150px;
                        text-align: right;

                        .status {
                            color: $main-color;
                            font-size: 26px;
                            margin-top: 5px;
                        }
                    }

                    .name {
                        margin-bottom: 10px;
                    }

                    .time {
                        font-size: 26px;
                        color: #666;
                        margin-top: 5px;
                    }
                }

                .operate-btn {
                    position: absolute;
                    bottom: 20px;
                    right: 20px;
                    font-size: 26px;
                    height: 50px;
                    border: 1px solid $main-color;
                    color: $main-color;
                    background: transparent;
                    cursor: pointer;
                }
            }
        }
    }

</style>
